<template>
  <div>
    <!-- 判断是否有数据 -->

    <div class="detail" v-if="true">
      <div class="top">
        <van-icon
          name="arrow-left"
          size="20"
          style="line-height: 39px; margin-left: 5px"
          @click="$router.go(-1)"
        />
        <div style="width: 98%; text-align: center">商品详情</div>
      </div>
      <div class="image">
        <van-swipe :autoplay="3000" v-if="gallery.length>0">
          <van-swipe-item v-for="image in gallery" :key="image.id">
            <img :src="image.img_url" />
          </van-swipe-item>
        </van-swipe>
        <img src="./image/lyml.jpg" alt="" v-else>
      </div>
      <div class="Content">
        <div class="Money">
          <span>¥{{ info.retail_price }}</span>
          <div @click="iscollect" :class="{red:collect}">
            <div class="Stars" >☆</div>
            <div style="font-size:">收藏</div>
          </div>
        </div>
        <div class="itemName">{{ info.name }}</div>
        <div style="font-size: 14px; color: #888">
          {{ info.goods_brief }}
        </div>
        <div style="font-size: 14px; color: #f74">
          品质服饰，年终触底价！新品低至5折抢！冲就对了！
        </div>
        <span class="MeetingPlace">进入会场&gt;</span>
      </div>
      <div class="Dividing"></div>
      <div class="Content">
        <div class="Selected">
          <van-cell is-link @click="showPopup">
            <span style="color: #888">已选：</span>

            <span>{{ attribute.name }}:{{ attribute.value }}</span>
          </van-cell>
          <van-popup
            v-model="show"
            position="bottom"
            closeable
            style="padding:0px 10px;width:96%"
          >
            <div v-for="(attr, index) in attributes" :key="index+'attr'">
              <div>{{ attr.name }}</div>
              <van-button
                plain
                hairline
                type="info"
                size="small"
                style="padding: 26px"
                >{{ attr.value }}</van-button
              >
              
            </div>
            <van-button type="primary" size="large" @click="Done" style="margin-top:20px">完成</van-button>
          </van-popup>
        </div>
        <div class="Dividing" style="height: 5px"></div>
        <div class="Selected">
          <span style="color: #888; width: 50px; font-size: 14px;padding-left:10px;text-align：center">服务：</span>
          <div class="Services">
            <span>包邮</span>
            <span>三方店铺</span>
            <span>支持7天无理由退货（拆封后不支持）</span>
            <span>有品配送</span>
          </div>

          <span style="color: #888; font-size: 20px; width: 30px">&gt;</span>
        </div>
      </div>
      <div class="Bottom">
        <div @click="toHome">
          <div style="padding-top: 8px">
            <van-icon name="wap-home-o" size="20" />
          </div>
          <div>首页</div>
        </div>
        <div @click="Share">
          <div style="padding-top: 8px">
            <van-icon name="share-o" size="20" />
          </div>
          <div>分享</div>
        </div>
        <div>
          <div style="padding-top: 8px">
            <van-icon name="shopping-cart-o" size="20" />
          </div>
          <div @click="toCart">购物车</div>
        </div>
        <div style="line-height: 48.75px">
          <span class="Join" @click="joinCart">加入购物车</span>
          <span class="Purchase" @click="Purchase">立即购买</span>
        </div>
      </div>
    </div>
    <!-- <div class="detail" v-else >
      <div class="top">
        <van-icon
          name="arrow-left"
          size="20"
          style="line-height: 39px; margin-left: 5px"
        />
        <div style="width: 98%; text-align: center">商品详情</div>
      </div>
      <div class="image">
        <img src="./image/lyml.jpg" alt="" />
      </div>
      <div class="Content">
        <div class="Money">
          <span>¥69.9</span>
          <div>
            <div class="Stars">☆</div>
            <div style="font-size: 12px">收藏</div>
          </div>
        </div>
        <div class="itemName">棉花史密斯 暖衣超值盲盒礼包 男款暖衣盲盒M</div>
        <div style="font-size: 14px; color: #888">
          盲盒外包装为普通快递包装盒，内含商品为独立包装，详情咨询客服
        </div>
        <div style="font-size: 14px; color: #f74">
          品质服饰，年终触底价！新品低至5折抢！冲就对了！
        </div>
        <span class="MeetingPlace">进入会场&gt;</span>
      </div>
      <div class="Dividing"></div>
      <div class="Content">
        <div class="Selected">
          <div>
            <span style="color: #888">已选：</span>
            <span>男款暖衣盲盒 M</span>
          </div>
          <div style="color: #888; font-size: 20px">&gt;</div>
        </div>
        <hr />
        <div class="Selected">
          <span style="color: #888; width: 78px">服务：</span>
          <div class="Services">
            <span>包邮</span>
            <span>三方店铺</span>
            <span>支持7天无理由退货（拆封后不支持）</span>
            <span>有品配送</span>
          </div>

          <span style="color: #888; font-size: 20px">&gt;</span>
        </div>
      </div>
      <div class="Bottom">
        <div>
          <div style="padding-top: 8px">
            <van-icon name="wap-home-o" size="20" />
          </div>
          <div>首页</div>
        </div>
        <div>
          <div style="padding-top: 8px">
            <van-icon name="share-o" size="20" />
          </div>
          <div>分享</div>
        </div>
        <div>
          <div style="padding-top: 8px">
            <van-icon name="shopping-cart-o" size="20" />
          </div>
          <div>购物车</div>
        </div>
        <div style="line-height: 48.75px">
          <span class="Join">加入购物车</span>
          <span class="Purchase">立即购买</span>
        </div>
      </div>
    </div> -->
  </div>
</template>

<script>
import { mapState } from "vuex";
import { AddProductToCart } from "../../api";
export default {
  name: "Detail",
  data() {
    return {
      show: false,
      orderid: {
        id: "",
      },
      collect:false
    };
  },
  computed: {
    ...mapState("detail", ["goodDetailInfo"]),
    gallery() {
      return this.goodDetailInfo.gallery;

    },
    info() {
      return this.goodDetailInfo.info;
    },
    productList(){
      return this.goodDetailInfo.productList;

    },
    attribute() {
      return this.goodDetailInfo.attribute[0] || {name:'',value:''};
    },
    attributes() {
      return this.goodDetailInfo.attribute;
    },
  },
  mounted() {
    const { id } = this.$route.query;
    this.orderid.id = id || 1181003;
    this.$store.dispatch("detail/getGoodsDetailData", this.orderid.id);
  },
  methods: {
    showPopup() {
      this.show = true;
    },
    Purchase() {
      this.$toast("时间紧任务重,暂未开发此功能");
    },
    Done(){
     this.show =false;
    },
    iscollect(){
      this.collect=!this.collect
      // console.log(this.collect);
      if(this.collect){
        this.$toast("收藏成功");
      }else{
        this.$toast("取消收藏");
      }
    },
    async joinCart() {
      // console.log(1111);
     const token = localStorage.getItem('TOKEN')
     if(!token) {
      this.$toast("未登录,请登录");
       this.$router.push({
          name: "logon",
        });
       return
     }
      let obj = {
        goodsId: this.info.id,
        productId: this.productList[0].id,
        number: 1,
      };
      const res = await AddProductToCart(obj);
      if (res.errno == 0) {
        this.$toast("加入购物车成功");
        setTimeout(() => {
          this.$router.push({
            name: "cart",
          });
        }, 1000);
      }
      this.$toast("加入购物车成功");
    },
    Share() {
      this.$toast("分享功能即将上线,客官请稍等...");
    },
    toCart() {
      this.$router.push({
        name: "cart",
      });
    },
    toHome() {
      this.$router.push({
        name: "home",
      });
    },
  },
};
</script>

<style lang="less" scoped>
.detail {
  height: 1700px;
  .red{
    color: red;
  }
  .top {
    width: 100%;
    display: flex;
    font-size: 52px;
    height: 104px;
    line-height: 104px;
    background-color: #f4a460;
    color: #fff;
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 10;
  }
  .image {
    img {
      width: 1000px;
      height: 1000px;
      .my-swipe .van-swipe-item {
        color: #fff;
        font-size: 20px;
        line-height: 150px;
        text-align: center;
        background-color: #39a9ed;
      }
    }
  }
  .Content {
    margin: 26px;

    .Money {
      display: flex;
      justify-content: space-between;
      span {
        line-height: 122px;
        font-size: 62px;
        color: #aa0000;
      }
      .Stars {
        text-align: center;
        font-size: 57px;
      }
    }
    .itemName {
      font-size: 52px;
    }
    .MeetingPlace {
      font-size: 36px;
      color: #f74;
      border: solid 3px #f74;
      padding: 0px 39px;
      margin-bottom: 78px;
    }
  }
  .Dividing {
    height: 13px;
    width: 100%;
    background-color: #aaa;
  }
  .Selected {
    display: flex;
    justify-content: space-between;
    height: 104px;
    line-height: 104px;
    .Services {
      line-height: normal;
      width: 720px;
      span {
        margin-right: 13px;
      }
    }
  }
  .Bottom {
    padding: 0px 25px;
    background-color: #fff;
    width: 95%;
    display: flex;
    justify-content: space-between;
    height: 130px;
    text-align: center;
    position: fixed;
    bottom: 0px;
    left: 0px;
    .Join {
      color: #fff;
      border-radius: 130px 0px 0px 130px;
      background-color: #860;
      padding: 13px 52px;
      height: 100px;
      width: 208px;
      line-height: 100px;
      font-size: 40px;
    }
    .Purchase {
      color: #fff;
      border-radius: 0px 130px 130px 0px;
      background-color: crimson;
      padding: 13px 52px;
      width: 208px;
      height: 78px;
      line-height: 78px;
      font-size: 40px;
    }
  }
}
</style>
